<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;

        }

        a {
            text-decoration: none;
        }

        .damiwang {
            width: 1560px;
            height: 40px;
            background-color: #333;

        }

        .damiwang1 {
            width: 1226px;
            height: 40px;

            margin: 0 auto;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;

        }

        .dami {
            width: 706px;
            height: 40px;

            box-sizing: border-box;
            display: flex;
            align-items: center;

        }

        .dami-right {
            width: 200px;
            height: 40px;

            box-sizing: border-box;
            display: flex;
            align-items: center;
        }

        .dami li a {
            color: #b0b0b0;
            font-size: 12px;

        }

        .dami li span {
            color: #b0b0b0;
            padding: 7px;

        }

        .dami-right a {
            color: #b0b0b0;
            font-size: 12px;
        }

        .dami-right1 {
            margin-right: 34px;
        }

        .tubiao {
            width: 1300px;
            height: 100px;
            border: 1px solid red;
            margin: 0 auto;
            margin-top: 15px;
            display: flex;
            align-items: center;



        }

        .tubiao1 {
            width: 50px;
            height: 50px;
            border: 1px solid red;

        }

        .tubiao1 img {
            width: 100%;
            height: 100%;
        }

        .tubiao3 {
            width: 850px;
            height: 100px;

            display: flex;
            align-items: center;
            justify-content: center;

        }

        .tubiao3 li {
            margin-left: 10px;
        }

        .youkuang {
            width: 200px;
            height: 50px;
            border: 1px solid red;

        }

        .youkuang1 {
            width: 50px;
            height: 50px;
            border: 1px solid red;

        }

        .shouji {
            width: 1300px;
            height: 500px;
            border: 1px solid red;
            margin: 0 auto;
            display: flex;



        }

        .shouji1 {
            width: 300px;
            height: 500px;
            border: 1px solid red;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

        }

        .shouji2 {

            width: 1000px;
            border: 1px solid red;
            height: 500px;

        }

        .shouji1 li {
            width: 200px;
            height: 30px;
            border: 1px solid red;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
        }

        .shouji1 .dayuhao {
            margin-left: 10px;
        }

        .shouji2 img {
            width: 100%;
            height: 100%;

        }

        .kaifang {
            width: 1300px;
            height: 250px;
            border: 1px solid red;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .kaifang1 {
            width: 300px;
            height: 250px;
            border: 1px solid red;
        }

        .kaifang2 {
            width: 300px;
            height: 250px;
            border: 1px solid red;
        }

        .kaifang3 {
            width: 300px;
            height: 250px;
            border: 1px solid red;
        }

        .kaifang4 {
            width: 300px;
            height: 250px;
            border: 1px solid red;
        }

        .goumai {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;

        }

        .goumai li {
            width: 80px;
            height: 80px;
            border: 1px solid red;
            margin: 28px 5px 5px 5px;
            text-align: center;
        }

        .kaifang2 img {
            width: 100%;
            height: 100%;
        }

        .kaifang3 img {
            width: 100%;
            height: 100%;
        }

        .danping {
            width: 1300px;
            height: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        .danping1 {
            width: 1300px;
            height: 50px;
            border: 1px solid red;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .mingxing {
            width: 100px;
            height: 49px;
            border: 1px solid red;
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .daxiao {
            width: 50px;
            height: 20px;
            border: 1px solid red;
            display: flex;
            justify-content: center;
        }
        .wuzhangtupian1{
            display: flex;
            justify-content: space-around;
            
           
        }
       

        .wuzhangtupian1 li{
            width: 240px;
            height: 240px;
            border: 1px solid red;
            text-align: center;
            
        }
        .zhineng{
            width: 1300px;
            height: 600px;
            border: 1px solid red;
            margin:  0 auto;
            margin-top: 30px;
        }
        .zhineng1{
            width: 1000px;
            height: 500px;
            
            margin: 0 auto;
            display: flex;
        }
        .kongqi{
            width: 200px;
            height: 100%;
           
            
        }
        .kongqi img{
            width: 100%;
            height: 100%;
        }
        .bazhang{
            width:800px;
            height:100%;
            
            display: flex;
            
            justify-content: center;
            justify-content: space-around;
           
            /* justify-content: space-around; */
            
        }
        .bazhang li{
            width: 180px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            /* border: 1px solid red; */
        }
        .tupian{
            width: 180px;
            height: 230px;
            border: 1px solid red;
            text-align: center ;
        }
        .lol{
            font-size: 11px;
            color: #b0b0b0;
        }
        .shuziba{
            font-size: 12px;
            margin-top: 8px;
            color: #ff6700;
        }
        

        
    </style>


</head>

<body>
    <div class="damiwang">
        <div class="damiwang1">

            <ul class="dami">
                <li>
                    <a href="#">大米网</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">MIUI</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">米聊</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#"> 游戏</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#"> 多看阅读</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">云服务</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#"> 大米移动版</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">问题反馈 </a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">大米网</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#"> Select Region</a>
                    <span>|</span>
                </li>

            </ul>


            <ul class="dami-right">
                <li class="dami-right1">
                    <a href="#"> 登陆 |注册</a></li>
                <li>
                    <a href="#"> 购物车（0）</a></li>
            </ul>
        </div>

    </div>
    <div class="tubiao">
        <div class="tubiao1">
            <img src="xiaomi_logo.png" alt="">
        </div>
        <ul class="tubiao3">
            <li>大米手机</li>
            <li>红米</li>
            <li>平板 </li>
            <li>电视</li>
            <li>大米手机</li>
            <li>大米手机</li>
            <li>大米手机</li>
            <li>大米手机</li>
            <li>大米手机</li>

        </ul>
        <div class="youkuang"></div>
        <div class="youkuang1"></div>
    </div>
    <div class="shouji">
        <ul class="shouji1">
            <li>
                <span>手机 平板 </span>
                <span>&gt;</span>
            </li>
            <li>
                <span>手机 平板 </span>
                <span>&gt;</span>
            </li>
            <li>
                <span>手机 平板 </span>
                <span>&gt;</span>
            </li>
            <li>
                <span>手机 平板 </span>
                <span>&gt;</span>
            </li>
            <li>
                <span>手机 平板 </span>
                <span>&gt;</span>
            </li>
            <li>
                <span>手机 平板 </span>
                <span>&gt;</span>
            </li>
            <li>
                <span>手机 平板 </span>
                <span>&gt;</span>
            </li>
            <li>
                <span>手机 平板 </span>
                <span>&gt;</span>
            </li>
            <li>
                <span>手机 平板 </span>
                <span>&gt;</span>
            </li>

        </ul>
        <div class="shouji2">
            <img src="T1vWdTBKDv1RXrhCrK.jpg" alt=""> </div>
    </div>
    <div class="kaifang">
        <div class="kaifang1">
            <ul class="goumai">
                <li class="">
                    <p>START</p>
                    <br>
                    <p>开放购买</p>
                </li>
                <li>
                    <p>START</p>
                    <br>
                    <p>开放购买</p>
                </li>
                <li>
                    <p>START</p>
                    <br>
                    <p>开放购买</p>
                </li>
                <li>
                    <p>START</p>
                    <br>
                    <p>开放购买</p>
                </li>
                <li>
                    <p>START</p>
                    <br>
                    <p>开放购买</p>
                </li>
                <li>
                    <p>START</p>
                    <br>
                    <p>开放购买</p>
                </li>


            </ul>

        </div>
        <div class="kaifang2">
            <img src="T1yvd_BQDT1RXrhCrK (1).jpg" alt="">

        </div>
        <div class="kaifang3">
            <img src="T1mahQBmKT1RXrhCrK (1).jpg" alt="">

        </div>
        <div class="kaifang3">
            <img src="T1mahQBmKT1RXrhCrK (1).jpg" alt="">
        </div>
    </div>
    <div class="danping">
        <div class="danping1">
            <span class="mingxing">大米明星单品</span>
            <div class="daxiao">
                <span>&lt;</span>
                <span>&gt;</span>
            </div>

        </div>
        
            <ul class="wuzhangtupian1">
                <li>
                    <img src="T1riKjB7VT1RXrhCrK.jpg" alt="">
                    <p>大米电视2/2S 全系列</p>
                    <p> 40/48/49/55英寸 现货购买</p>
                </li>
                <li>
                    <img src="T1riKjB7VT1RXrhCrK.jpg" alt="">
                    <p>大米电视2/2S 全系列</p>
                    <p> 40/48/49/55英寸 现货购买</p>
                </li>
                <li>
                    <img src="T1riKjB7VT1RXrhCrK.jpg" alt="">
                    <p>大米电视2/2S 全系列</p>
                    <p> 40/48/49/55英寸 现货购买</p>
                </li>
                <li>
                    <img src="T1riKjB7VT1RXrhCrK.jpg" alt="">
                    <p>大米电视2/2S 全系列</p>
                    <p> 40/48/49/55英寸 现货购买</p>
                </li>
                <li>
                    <img src="T1riKjB7VT1RXrhCrK.jpg" alt="">
                    <p>大米电视2/2S 全系列</p>
                    <p class=""> 40/48/49/55英寸 现货购买</p>
                </li>
                
            </ul>
        
    </div>
    <div class="zhineng">
        <h3>智能硬件</h3>
        <div class="zhineng1">
            <div class="kongqi">
                <img src="T1IhLjBC_T1RXrhCrK.jpg" alt="">
            </div>
            <ul class="bazhang">
                <li>
                    <div class="tupian">
                        <img src="T1odEjB5bT1RXrhCrK.jpg" alt="">
                        <p>大米智能家庭套装</p>
                        <p class="lol">3分钟快速安装，30多种智能玩法</p>
                      
                        <p class="shuziba">199元</p>
                    </div>
                    <div class="tupian">
                        <img src="T1odEjB5bT1RXrhCrK.jpg" alt="">
                        <p>大米智能家庭套装</p>
                        <p class="lol">3分钟快速安装，30多种智能玩法</p>
                      
                        <p class="shuziba">199元</p>
                    </div>
                </li>
                
                <li>
                    <div class="tupian">
                        <img src="T1odEjB5bT1RXrhCrK.jpg" alt="">
                        <p>大米智能家庭套装</p>
                        <p class="lol">3分钟快速安装，30多种智能玩法</p>
                      
                        <p class="shuziba">199元</p>
                    </div>
                    <div class="tupian">
                        <img src="T1odEjB5bT1RXrhCrK.jpg" alt="">
                        <p>大米智能家庭套装</p>
                        <p class="lol">3分钟快速安装，30多种智能玩法</p>
                      
                        <p class="shuziba">199元</p>
                    </div>
                </li>
                
                <li>
                    <div class="tupian">
                        <img src="T1odEjB5bT1RXrhCrK.jpg" alt="">
                        <p>大米智能家庭套装</p>
                        <p class="lol">3分钟快速安装，30多种智能玩法</p>
                      
                        <p class="shuziba">199元</p>
                    </div>
                    <div class="tupian">
                        <img src="T1odEjB5bT1RXrhCrK.jpg" alt="">
                        <p>大米智能家庭套装</p>
                        <p class="lol">3分钟快速安装，30多种智能玩法</p>
                      
                        <p class="shuziba">199元</p>
                    </div>
                </li>
                
                <li>
                    <div class="tupian">
                        <img src="T1odEjB5bT1RXrhCrK.jpg" alt="">
                        <p>大米智能家庭套装</p>
                        <p class="lol">3分钟快速安装，30多种智能玩法</p>
                      
                        <p class="shuziba">199元</p>
                    </div>
                    <div class="tupian">
                        <img src="T1odEjB5bT1RXrhCrK.jpg" alt="">
                        <p>大米智能家庭套装</p>
                        <p class="lol">3分钟快速安装，30多种智能玩法</p>
                      
                        <p class="shuziba">199元</p>
                    </div>
                </li>
                
               
            </ul>

        </div>
    </div>
    <div class="zuixiamian"></div>




</body>

</html>